<template>
  <div class="project-reports">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">项目报表</h1>
      <p class="page-description">项目数据分析与可视化报表，支持多维度数据展示和导出</p>
    </div>

    <!-- 报表筛选条件 -->
    <el-card class="filter-card">
      <template #header>
        <span>筛选条件</span>
      </template>
      <el-form :model="reportFilters" :inline="true" class="filter-form">
        <el-form-item label="项目">
          <el-select v-model="reportFilters.projectId" placeholder="选择项目" clearable style="width: 200px">
            <el-option
              v-for="project in projectList"
              :key="project.id"
              :label="project.name"
              :value="project.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="reportFilters.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="报表类型">
          <el-select v-model="reportFilters.reportType" placeholder="选择报表类型" style="width: 150px">
            <el-option label="进度报表" value="progress" />
            <el-option label="成本报表" value="cost" />
            <el-option label="资源报表" value="resource" />
            <el-option label="风险报表" value="risk" />
            <el-option label="质量报表" value="quality" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="generateReport" :loading="reportLoading">
            <el-icon><Search /></el-icon>
            生成报表
          </el-button>
          <el-button @click="resetFilters">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
          <el-button @click="exportReport">
            <el-icon><Download /></el-icon>
            导出报表
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 报表概览 -->
    <el-row :gutter="20" class="overview-section">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="overview-card">
          <div class="card-content">
            <div class="card-icon projects">
              <el-icon><Management /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-value">{{ reportOverview.totalProjects }}</div>
              <div class="card-label">总项目数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="overview-card">
          <div class="card-content">
            <div class="card-icon progress">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-value">{{ reportOverview.avgProgress }}%</div>
              <div class="card-label">平均进度</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="overview-card">
          <div class="card-content">
            <div class="card-icon budget">
              <el-icon><Money /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-value">{{ reportOverview.totalBudget }}</div>
              <div class="card-label">总预算</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="overview-card">
          <div class="card-content">
            <div class="card-icon resources">
              <el-icon><User /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-value">{{ reportOverview.totalResources }}</div>
              <div class="card-label">参与人员</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 报表内容区域 -->
    <el-row :gutter="20" class="report-content">
      <!-- 项目进度分析 -->
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>项目进度分析</span>
              <el-button size="small" @click="refreshProgressChart">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
          </template>
          <div ref="progressChartRef" class="chart-container"></div>
        </el-card>
      </el-col>

      <!-- 成本分析 -->
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>成本分析</span>
              <el-button size="small" @click="refreshCostChart">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
          </template>
          <div ref="costChartRef" class="chart-container"></div>
        </el-card>
      </el-col>

      <!-- 资源利用率 -->
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>资源利用率</span>
              <el-button size="small" @click="refreshResourceChart">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
          </template>
          <div ref="resourceChartRef" class="chart-container"></div>
        </el-card>
      </el-col>

      <!-- 风险分布 -->
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>风险分布</span>
              <el-button size="small" @click="refreshRiskChart">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
          </template>
          <div ref="riskChartRef" class="chart-container"></div>
        </el-card>
      </el-col>

      <!-- 项目时间线 -->
      <el-col :xs="24">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>项目时间线</span>
              <el-button size="small" @click="refreshTimelineChart">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
          </template>
          <div ref="timelineChartRef" class="chart-container timeline-chart"></div>
        </el-card>
      </el-col>

      <!-- 质量指标 -->
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>质量指标</span>
              <el-button size="small" @click="refreshQualityChart">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
          </template>
          <div ref="qualityChartRef" class="chart-container"></div>
        </el-card>
      </el-col>

      <!-- 团队绩效 -->
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>团队绩效</span>
              <el-button size="small" @click="refreshTeamChart">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </div>
          </template>
          <div ref="teamChartRef" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细数据表格 -->
    <el-card class="table-card">
      <template #header>
        <div class="card-header">
          <span>详细数据</span>
          <div class="header-actions">
            <el-button size="small" @click="exportTableData">
              <el-icon><Download /></el-icon>
              导出数据
            </el-button>
          </div>
        </div>
      </template>
      
      <el-table
        :data="reportTableData"
        v-loading="tableLoading"
        stripe
        style="width: 100%"
        max-height="400"
      >
        <el-table-column prop="projectName" label="项目名称" min-width="150" fixed="left" />
        <el-table-column prop="progress" label="进度" width="100">
          <template #default="{ row }">
            <el-progress :percentage="row.progress" :stroke-width="8" />
          </template>
        </el-table-column>
        <el-table-column prop="budget" label="预算" width="120">
          <template #default="{ row }">
            ¥{{ row.budget.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="actualCost" label="实际成本" width="120">
          <template #default="{ row }">
            ¥{{ row.actualCost.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="variance" label="成本偏差" width="120">
          <template #default="{ row }">
            <span :class="getVarianceClass(row.variance)">
              {{ row.variance > 0 ? '+' : '' }}{{ row.variance.toFixed(1) }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="teamSize" label="团队规模" width="100" />
        <el-table-column prop="riskLevel" label="风险等级" width="100">
          <template #default="{ row }">
            <el-tag :type="getRiskLevelType(row.riskLevel)">{{ row.riskLevel }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="quality" label="质量评分" width="100">
          <template #default="{ row }">
            <el-rate v-model="row.quality" disabled show-score text-color="#ff9900" />
          </template>
        </el-table-column>
        <el-table-column prop="startDate" label="开始日期" width="120" />
        <el-table-column prop="endDate" label="结束日期" width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="tablePagination.currentPage"
          v-model:page-size="tablePagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="tablePagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleTableSizeChange"
          @current-change="handleTableCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Search,
  Refresh,
  Download,
  Management,
  TrendCharts,
  Money,
  User
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'

// 响应式数据
const reportLoading = ref(false)
const tableLoading = ref(false)

// 筛选条件
const reportFilters = reactive({
  projectId: '',
  dateRange: [],
  reportType: 'progress'
})

// 项目列表
const projectList = ref([
  { id: 1, name: 'ERP系统开发' },
  { id: 2, name: '移动端APP开发' },
  { id: 3, name: '数据中台建设' },
  { id: 4, name: '智能客服系统' },
  { id: 5, name: '供应链管理系统' }
])

// 报表概览数据
const reportOverview = ref({
  totalProjects: 15,
  avgProgress: 68.5,
  totalBudget: '¥2,580万',
  totalResources: 156
})

// 图表引用
const progressChartRef = ref()
const costChartRef = ref()
const resourceChartRef = ref()
const riskChartRef = ref()
const timelineChartRef = ref()
const qualityChartRef = ref()
const teamChartRef = ref()

// 图表实例
let progressChart: echarts.ECharts | null = null
let costChart: echarts.ECharts | null = null
let resourceChart: echarts.ECharts | null = null
let riskChart: echarts.ECharts | null = null
let timelineChart: echarts.ECharts | null = null
let qualityChart: echarts.ECharts | null = null
let teamChart: echarts.ECharts | null = null

// 表格数据
const reportTableData = ref([
  {
    id: 1,
    projectName: 'ERP系统开发',
    progress: 75,
    budget: 5000000,
    actualCost: 4200000,
    variance: -16.0,
    teamSize: 12,
    riskLevel: '中',
    quality: 4.2,
    startDate: '2024-01-01',
    endDate: '2024-06-30',
    status: '进行中'
  },
  {
    id: 2,
    projectName: '移动端APP开发',
    progress: 90,
    budget: 3000000,
    actualCost: 3200000,
    variance: 6.7,
    teamSize: 8,
    riskLevel: '低',
    quality: 4.5,
    startDate: '2024-02-01',
    endDate: '2024-05-31',
    status: '即将完成'
  },
  {
    id: 3,
    projectName: '数据中台建设',
    progress: 45,
    budget: 8000000,
    actualCost: 3600000,
    variance: -10.0,
    teamSize: 15,
    riskLevel: '高',
    quality: 3.8,
    startDate: '2024-03-01',
    endDate: '2024-12-31',
    status: '进行中'
  },
  {
    id: 4,
    projectName: '智能客服系统',
    progress: 100,
    budget: 2000000,
    actualCost: 1950000,
    variance: -2.5,
    teamSize: 6,
    riskLevel: '低',
    quality: 4.8,
    startDate: '2023-10-01',
    endDate: '2024-01-31',
    status: '已完成'
  },
  {
    id: 5,
    projectName: '供应链管理系统',
    progress: 30,
    budget: 6000000,
    actualCost: 1800000,
    variance: 0.0,
    teamSize: 10,
    riskLevel: '中',
    quality: 4.0,
    startDate: '2024-04-01',
    endDate: '2024-10-31',
    status: '进行中'
  }
])

// 表格分页
const tablePagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 5
})

// 方法
const generateReport = async () => {
  reportLoading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 刷新所有图表
    await nextTick()
    refreshAllCharts()
    
    ElMessage.success('报表生成成功')
  } catch (error) {
    console.error('生成报表失败:', error)
    ElMessage.error('生成报表失败')
  } finally {
    reportLoading.value = false
  }
}

const resetFilters = () => {
  reportFilters.projectId = ''
  reportFilters.dateRange = []
  reportFilters.reportType = 'progress'
}

const exportReport = () => {
  ElMessage.success('报表导出功能开发中')
}

const exportTableData = () => {
  ElMessage.success('数据导出功能开发中')
}

// 表格相关方法
const getVarianceClass = (variance: number) => {
  if (variance > 0) return 'variance-positive'
  if (variance < 0) return 'variance-negative'
  return 'variance-neutral'
}

const getRiskLevelType = (level: string) => {
  const types = {
    '低': 'success',
    '中': 'warning',
    '高': 'danger'
  }
  return types[level] || 'info'
}

const getStatusType = (status: string) => {
  const types = {
    '进行中': 'primary',
    '即将完成': 'warning',
    '已完成': 'success',
    '已暂停': 'info',
    '已取消': 'danger'
  }
  return types[status] || 'default'
}

const handleTableSizeChange = (size: number) => {
  tablePagination.pageSize = size
  tablePagination.currentPage = 1
}

const handleTableCurrentChange = (page: number) => {
  tablePagination.currentPage = page
}

// 图表初始化方法
const initProgressChart = () => {
  if (!progressChartRef.value) return
  
  progressChart = echarts.init(progressChartRef.value)
  
  const option = {
    title: {
      text: '项目进度统计',
      left: 'center',
      textStyle: { fontSize: 14 }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    xAxis: {
      type: 'category',
      data: ['ERP系统', '移动APP', '数据中台', '智能客服', '供应链']
    },
    yAxis: {
      type: 'value',
      max: 100,
      axisLabel: { formatter: '{value}%' }
    },
    series: [{
      name: '完成进度',
      type: 'bar',
      data: [75, 90, 45, 100, 30],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      }
    }]
  }
  
  progressChart.setOption(option)
}

const initCostChart = () => {
  if (!costChartRef.value) return
  
  costChart = echarts.init(costChartRef.value)
  
  const option = {
    title: {
      text: '成本分析',
      left: 'center',
      textStyle: { fontSize: 14 }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['预算', '实际成本'],
      bottom: 0
    },
    xAxis: {
      type: 'category',
      data: ['ERP系统', '移动APP', '数据中台', '智能客服', '供应链']
    },
    yAxis: {
      type: 'value',
      axisLabel: { formatter: '{value}万' }
    },
    series: [
      {
        name: '预算',
        type: 'bar',
        data: [500, 300, 800, 200, 600],
        itemStyle: { color: '#5470c6' }
      },
      {
        name: '实际成本',
        type: 'bar',
        data: [420, 320, 360, 195, 180],
        itemStyle: { color: '#91cc75' }
      }
    ]
  }
  
  costChart.setOption(option)
}

const initResourceChart = () => {
  if (!resourceChartRef.value) return
  
  resourceChart = echarts.init(resourceChartRef.value)
  
  const option = {
    title: {
      text: '资源利用率',
      left: 'center',
      textStyle: { fontSize: 14 }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}% ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [{
      name: '资源分配',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '18',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 35, name: '开发人员' },
        { value: 25, name: '测试人员' },
        { value: 20, name: '产品经理' },
        { value: 15, name: '设计师' },
        { value: 5, name: '其他' }
      ]
    }]
  }
  
  resourceChart.setOption(option)
}

const initRiskChart = () => {
  if (!riskChartRef.value) return
  
  riskChart = echarts.init(riskChartRef.value)
  
  const option = {
    title: {
      text: '风险分布',
      left: 'center',
      textStyle: { fontSize: 14 }
    },
    tooltip: {
      trigger: 'item'
    },
    series: [{
      name: '风险等级',
      type: 'pie',
      radius: '60%',
      data: [
        { value: 2, name: '高风险', itemStyle: { color: '#ff4757' } },
        { value: 5, name: '中风险', itemStyle: { color: '#ffa502' } },
        { value: 8, name: '低风险', itemStyle: { color: '#2ed573' } }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  }
  
  riskChart.setOption(option)
}

const initTimelineChart = () => {
  if (!timelineChartRef.value) return
  
  timelineChart = echarts.init(timelineChartRef.value)
  
  const option = {
    title: {
      text: '项目时间线',
      left: 'center',
      textStyle: { fontSize: 14 }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['计划进度', '实际进度'],
      bottom: 0
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value',
      max: 100,
      axisLabel: { formatter: '{value}%' }
    },
    series: [
      {
        name: '计划进度',
        type: 'line',
        data: [10, 25, 40, 55, 70, 85],
        smooth: true,
        itemStyle: { color: '#5470c6' }
      },
      {
        name: '实际进度',
        type: 'line',
        data: [8, 22, 35, 48, 65, 75],
        smooth: true,
        itemStyle: { color: '#91cc75' }
      }
    ]
  }
  
  timelineChart.setOption(option)
}

const initQualityChart = () => {
  if (!qualityChartRef.value) return
  
  qualityChart = echarts.init(qualityChartRef.value)
  
  const option = {
    title: {
      text: '质量指标',
      left: 'center',
      textStyle: { fontSize: 14 }
    },
    tooltip: {
      trigger: 'axis'
    },
    radar: {
      indicator: [
        { name: '代码质量', max: 5 },
        { name: '测试覆盖率', max: 5 },
        { name: '文档完整性', max: 5 },
        { name: '用户满意度', max: 5 },
        { name: '性能指标', max: 5 },
        { name: '安全性', max: 5 }
      ]
    },
    series: [{
      name: '质量评分',
      type: 'radar',
      data: [
        {
          value: [4.2, 3.8, 4.5, 4.0, 3.9, 4.3],
          name: '综合评分'
        }
      ]
    }]
  }
  
  qualityChart.setOption(option)
}

const initTeamChart = () => {
  if (!teamChartRef.value) return
  
  teamChart = echarts.init(teamChartRef.value)
  
  const option = {
    title: {
      text: '团队绩效',
      left: 'center',
      textStyle: { fontSize: 14 }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['张三', '李四', '王五', '赵六', '钱七']
    },
    series: [{
      name: '绩效评分',
      type: 'bar',
      data: [85, 92, 78, 88, 95],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#ffeaa7' },
          { offset: 1, color: '#fab1a0' }
        ])
      }
    }]
  }
  
  teamChart.setOption(option)
}

// 刷新图表方法
const refreshProgressChart = () => {
  if (progressChart) {
    progressChart.resize()
  }
}

const refreshCostChart = () => {
  if (costChart) {
    costChart.resize()
  }
}

const refreshResourceChart = () => {
  if (resourceChart) {
    resourceChart.resize()
  }
}

const refreshRiskChart = () => {
  if (riskChart) {
    riskChart.resize()
  }
}

const refreshTimelineChart = () => {
  if (timelineChart) {
    timelineChart.resize()
  }
}

const refreshQualityChart = () => {
  if (qualityChart) {
    qualityChart.resize()
  }
}

const refreshTeamChart = () => {
  if (teamChart) {
    teamChart.resize()
  }
}

const refreshAllCharts = () => {
  nextTick(() => {
    initProgressChart()
    initCostChart()
    initResourceChart()
    initRiskChart()
    initTimelineChart()
    initQualityChart()
    initTeamChart()
  })
}

// 生命周期
onMounted(() => {
  nextTick(() => {
    refreshAllCharts()
  })
  
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    refreshProgressChart()
    refreshCostChart()
    refreshResourceChart()
    refreshRiskChart()
    refreshTimelineChart()
    refreshQualityChart()
    refreshTeamChart()
  })
})
</script>

<style scoped>
.project-reports {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
}

.page-description {
  color: #909399;
  margin: 0;
  font-size: 14px;
}

/* 筛选卡片 */
.filter-card {
  margin-bottom: 24px;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* 概览卡片样式 */
.overview-section {
  margin-bottom: 24px;
}

.overview-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.overview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
}

.card-content {
  display: flex;
  align-items: center;
  padding: 20px;
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  margin-right: 16px;
}

.card-icon.projects {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-icon.progress {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.card-icon.budget {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.card-icon.resources {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.card-info {
  flex: 1;
}

.card-value {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.card-label {
  font-size: 14px;
  color: #909399;
}

/* 报表内容区域 */
.report-content {
  margin-bottom: 24px;
}

.chart-card {
  margin-bottom: 20px;
  min-height: 400px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  width: 100%;
  height: 300px;
}

.timeline-chart {
  height: 400px;
}

/* 表格卡片 */
.table-card {
  margin-bottom: 24px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 表格样式 */
.variance-positive {
  color: #f56c6c;
  font-weight: 500;
}

.variance-negative {
  color: #67c23a;
  font-weight: 500;
}

.variance-neutral {
  color: #909399;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .project-reports {
    padding: 12px;
  }
  
  .page-title {
    font-size: 20px;
  }
  
  .filter-form {
    flex-direction: column;
  }
  
  .filter-form .el-form-item {
    margin-bottom: 16px;
  }
  
  .card-content {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .card-icon {
    margin-right: 0;
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
  
  .card-value {
    font-size: 24px;
  }
  
  .chart-container {
    height: 250px;
  }
  
  .timeline-chart {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 18px;
  }
  
  .card-value {
    font-size: 20px;
  }
  
  .chart-container {
    height: 200px;
  }
  
  .timeline-chart {
    height: 250px;
  }
  
  .header-actions {
    flex-direction: column;
  }
}
</style>